<template>
	<div class="applyForAfterSalesContent">
		<!--占位-->
		<div class="placeholder"></div>
		<!--商品-->
		<div class="goods fix">
			<img class="goodsimg fl" src="">
			<div class="goodsright fl">
				<div class="goodsright_title">{{goodsTitle}}</div>
				<div class="goodsright_specification">{{goodsSpecification}}</div>
			</div>
		</div>
		<!--售后类型-->
		<div class="afastype">
			<div class="afastype_title">售后类型</div>
			<mt-radio align="right" v-model="value" :options="options"></mt-radio>
		</div>
		<!--数量金额-->
		<ul class="nummoney">
			<li class="fix">
				<div class="nummoney_title fl">数量</div>
				<div class="nummoney_nummoney fl">*{{nummoneyNum}}</div>
			</li>
			<li class="fix">
				<div class="nummoney_title fl">金额</div>
				<div class="nummoney_nummoney fl">￥{{nummoneyMoney}}</div>
				<div class="nummoney_describe fl">积分商品，退货时积分不退</div>
			</li>
		</ul>
		<!--数量-->
		<ul class="num">
			<li class="fix">
				<div class="num_title fl">数量</div>
				<div class="num_num1 fr">件</div>
				<div class="num_num2 fr">{{nummoneyNum}}</div>
			</li>
		</ul>
		<!--售后原因-->
		<div class="afascause fix" @click="isAFASCause">
			<div class="afascause_title fl">选择售后原因</div>
			<div class="afascause_describe fl">*必填</div>
			<img class="afascause_img fr" src="../assets/image/ico_arrows@2x.png">
		</div>
		<!--产品质量问题-->
		<div class="afascause fix">
			<div class="afascause_title fl">产品质量问题</div>
			<div class="afascause_describe fl">*</div>
			<img class="afascause_img fr" src="../assets/image/ico_arrows@2x.png">
		</div>
		<!--问题描述-->
		<div class="problemdescribe">
			<div class="problemdescribe_title">问题描述</div>
			<textarea class="problemdescribe_text" placeholder="请输入您的问题描述，不少于10个字"></textarea>
		</div>
		<!--上传凭证-->
		<div class="uploaddocuments">
			<div class="uploaddocuments_title">上传凭证（最多4张）</div>
			<ul class="uploaddocuments_list fix">
				<li><img src="" class="uploaddocuments_img"><img class="close_icon" src="../assets/image/delete_img@2x.png"></li>
				<li><img src="" class="uploaddocuments_img"><img class="close_icon" src="../assets/image/delete_img@2x.png"></li>
				<li><img src="" class="uploaddocuments_img"><img class="close_icon" src="../assets/image/delete_img@2x.png"></li>
				<li><img class="uploaddocuments_lastimg" src="../assets/image/upload@2x.png"></li>
			</ul>
		</div>
		<!--收货信息-->
		<dl class="receiveinformation">
			<dt class="receiveinformation_title">收货信息</dt>
			<dd class="receiveinformation_dd fix">
				<div class="receiveinformation_ddtitle fl">联系人：</div>
				<div class="receiveinformation_dddescribe fl">{{receiveName}}</div>
			</dd>
			<dd class="receiveinformation_dd fix">
				<div class="receiveinformation_ddtitle fl">联系电话：</div>
				<div class="receiveinformation_dddescribe fl">{{receivePhone}}</div>
			</dd>
			<dd class="receiveinformation_dd fix">
				<div class="receiveinformation_ddtitle fl">所在地区：</div>
				<div class="receiveinformation_dddescribe fl">{{receiveRegion}}</div>
				<router-link to="/" class="receiveinformation_arrow fr"><img class="receiveinformation_img" src="../assets/image/ico_arrows@2x.png"></router-link>
			</dd>
			<dd class="receiveinformation_dd fix">
				<div class="receiveinformation_ddtitle fl">详细地址：</div>
				<div class="receiveinformation_dddescribe fl">{{receiveAddress}}</div>
			</dd>
		</dl>
		<!--占位-->
		<div class="placeholder2"></div>
		<!--提交-->
		<router-link to="/" class="commit">提交</router-link>
		<!--售后原因弹窗-->
		<div v-bind:class="AFASCause" class="popup">
			<ul class="afascause_list">
				<li class="afascause_li">无</li>
				<li class="afascause_li">产品质量问题</li>
			</ul>
			<div class="ok" @click="isAFASCause">确定</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import { Radio } from 'mint-ui';

import 'mint-ui/lib/Radio/style.css';

Vue.component(Radio.name, Radio);

export default {
	name: 'app',
	data () {
		return {
			goodsTitle:'乐町2017夏季新款女装绿色短款刺绣宽松短袖宽松宽松短袖T恤女夏韩版纯色上衣',
			goodsSpecification:'颜色：橙色； 尺码：M',
			// radio的选项
			options : [{
			label: '退货退款',
			value: '退货退款'
			},
			{
			label: '换货',
			value: '换货'
			},
			{
			label: '仅退款',
			value: '仅退款'
			}],
			nummoneyNum:'2',
			nummoneyMoney:'180.00',
			receiveName:'段倩',
			receivePhone:'18678942859',
			receiveRegion:'广东省 深圳市 南山区',
			receiveAddress:'科兴科学园A栋401室',
			AFASCause: 'hidden',
		}
	},
	methods:{
		isAFASCause () {
			this.AFASCause = this.AFASCause ? '': 'hidden';
		},
	}
}
</script>
<style lang="scss">
.applyForAfterSalesContent{
	// 占位
	.placeholder{ height: 0.2rem; }
	// 商品
	.goods{ padding: 0 0.3rem; height: 1.74rem; background: #fff; }
	.goodsimg{ margin-top: 0.2rem; width: 1.34rem; height: 1.34rem; background: #eee; }
	.goodsright{
		padding-left: 0.16rem; width: 5.4rem; height: 1.54rem; position: relative;
		.goodsright_title{ padding-top: 0.16rem; line-height: 0.36rem; font-size: 0.24rem; color: #333; }
		.goodsright_specification{ padding-top: 0.2rem; height: 0.2rem; line-height: 0.2rem; font-size: 0.2rem; color: #999; }
	}
	// 售后类型
	.afastype{ margin-top: 0.2rem; padding: 0 0.3rem; height: 1.86rem; background: #fff; position: relative; }
	.afastype_title{ padding-top: 0.28rem; height: 0.28rem; line-height: 0.28rem; font-size: 0.28rem; color: #333; }
	.mint-radiolist{ width: 100%; position: absolute; left: 0.3rem; top: 0.76rem; z-index: 18; }
	.mint-radiolist-title{ margin: 0; }
	.mint-radiolist-label{ padding: 0; position: relative; }
	.mint-cell{ display: block; float: left; margin-right: 0.3rem; width: 2.1rem; height: 0.8rem; border-radius: 0.1rem; }
	.mint-radio-core{ display: block; width: 2.08rem; height: 0.78rem; border: 1px solid #ddd; border-radius: 0.1rem; }
	.mint-radio-input:checked+.mint-radio-core{ background-color: #ff365d; border-color: #ff365d; }
	.mint-radio-input:checked+.mint-radio-core::after{ background: none; }
	.mint-radio-label{ margin: 0; width: 2.1rem; height: 0.8rem; line-height: 0.8rem; text-align: center; font-size: 0.28rem; color: #ddd; position: absolute; left: 0; top: 0; z-index: 1; }
	.mint-radio-label:hover{ color: #fff; }
	// 数量金额
	.nummoney{ margin-top: 0.2rem; padding: 0.2rem 0.3rem; background: #fff; }
	.nummoney_title{ padding-right: 0.36rem; line-height: 0.5rem; font-size: 0.28rem; color: #333; }
	.nummoney_nummoney{ line-height: 0.5rem; font-size: 0.3rem; color: #ff365d; }
	.nummoney_describe{ padding-left: 0.2rem; line-height: 0.5rem; font-size: 0.24rem; color: #aaa; }
	// 数量
	.num{ margin-top: 0.2rem; padding: 0.2rem 0.3rem; background: #fff; }
	.num_title{ padding-right: 0.36rem; line-height: 0.5rem; font-size: 0.28rem; color: #333; }
	.num_num1{ padding-left: 0.1rem; line-height: 0.5rem; font-size: 0.24rem; color: #151517; }
	.num_num2{ line-height: 0.5rem; font-size: 0.3rem; color: #ff365d; }
	// 售后原因
	.afascause{ display: block; margin-top: 0.2rem; padding: 0 0.3rem; height: 0.88rem; background: #fff; }
	.afascause_title{ line-height: 0.88rem; font-size: 0.28rem; color: #333; }
	.afascause_describe{ padding-left: 0.28rem; line-height: 0.88rem; font-size: 0.2rem; color: #ff365d; }
	.afascause_img{ display: block; padding-top: 0.32rem; width: 0.14rem; height: 0.24rem; }
	// 问题描述
	.problemdescribe{ margin-top: 0.2rem; padding: 0 0.3rem; height: 3.16rem; background: #fff; }
	.problemdescribe_title{ height: 0.88rem; line-height: 0.88rem; font-size: 0.28rem; color: #333; }
	.problemdescribe_text{ padding: 0.2rem; width: 6.5rem; height: 1.6rem; line-height: 0.46rem; font-size: 0.26rem; color: #999; background: #f4f5f5; }
	// 上传凭证
	.uploaddocuments{ margin-top: 0.2rem; padding: 0 0.3rem; height: 2.62rem; background: #fff; }
	.uploaddocuments_title{ height: 0.88rem; line-height: 0.88rem; font-size: 0.28rem; color: #333; }
	.uploaddocuments_list{
		li{
			float: left; width: 1.56rem; height: 1.56rem; position: relative;
			+li{ margin-left: 0.2rem; }
		}
	}
	.uploaddocuments_img{ display: block; width: 1.56rem; height: 1.56rem; }
	.close_icon{ display: block; width: 0.4rem; height: 0.4rem; position: absolute; right: 0; top: 0; }
	.uploaddocuments_lastimg{ display: block; width: 1.56rem; height: 1.56rem; }
	// 收货信息
	.receiveinformation{ margin-top: 0.2rem; }
	.receiveinformation_title{ padding: 0 0.3rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.28rem; background: #fff; color: #333; }
	.receiveinformation_dd{ margin-top: 0.04rem; padding: 0 0.3rem; height: 0.8rem; background: #fff; }
	.receiveinformation_ddtitle{ width: 1.34rem; line-height: 0.8rem; font-size: 0.24rem; color: #666; }
	.receiveinformation_dddescribe{ line-height: 0.8rem; font-size: 0.28rem; color: #333; }
	.receiveinformation_arrow{ padding-top: 0.28rem; width: 0.14rem; height: 0.24rem; }
	.receiveinformation_img{ display: block; width: 0.14rem; height: 0.24rem; }
	// 占位
	.placeholder2{ height: 1.2rem; }
	// 提交
	.commit{ display: block; width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
	// 弹窗
	.popup{ width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20; }
	.afascause_list{ width: 100%; background: #fff; position: absolute; left: 0; bottom: 0.98rem; z-index: 20; }
	.afascause_li{ padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem; font-size: 0.28rem; color: #151517; }
	.afascause_li:hover{ color: #ff365d; }
	.ok{ width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
}
</style>
